<template>
  <div class='noticeSwiper'>
    <!-- swiper -->
    <!-- 选择功能 -->
    <div class="type">
      <span>通知公告</span>
      <span @click="tonoticeList">查看全部<i class="iconwhole iconfont icon-youjiantou"></i></span>
    </div>
    <swiper :options="swiperOption" v-if="message!=0">
      <swiper-slide v-for="(list,index) in message" :key="index">
        <div @click="goNoticeDetail(list.id)">
          <div class='noticeSwiper-img-box'>
            <img class="noticeSwiper-img" v-lazy="list.image" v-if="list.image" :src="list.image" alt="" >
            <img class="noticeSwiper-img" v-else src="../../../assets/images/maxSwiper.png" alt="">
          </div>
          <div class="noticeSwiper-content">
            <div class="noticeSwiper-list">
              <span class="noticeSwiper-tittle">{{list.title}}</span>
              <span class="noticeSwiper-time">{{list.createtime_text}}</span>
              <span class="noticeSwiper-rate">
                <!-- <van-rate
                  style="width: auto;margin-right:.1rem;"
                  readonly
                  v-model="list.star"
                  allow-half
                  void-icon="star"
                  void-color="#6b5da6"
                  color= '#ffa272'
                  @change= 'change(index)'
                  size= ".3rem"
                /> -->
                <span class="number">
                  <!-- <span>(333)</span> -->
                  <span class="collection" v-if="list.favor"><img @click.stop="starnumber(index,list.id)" src="@/assets//images/collection-color.png" alt=""></span>
                  <span class="collection" v-else><img  @click.stop="starnumber(index,list.id)" src="@/assets//images/collection.png" alt=""></span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import api from '../../../api/api.js'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Rate } from 'vant';
  export default{
    props:{
      message:{
        type:Array
      }
    },
    data(){
      return{
        host: api.host,
        swiperOption: {
          slidesPerView: 1.5,
          spaceBetween: 30,
          freeMode: false,
        }
      }
    },
    methods:{
      starnumber(index,id){
        this.message[index].favor = !this.message[index].favor
        if(this.message[index].favor==true){
          this.$toast('收藏成功')
        }else{
          this.$toast('收藏取消')
        }
        this.$emit('getfavor',id)
      },
      tonoticeList(){
        this.$router.push('/noticeList')
      },
      goNoticeDetail(id){
        this.$router.push({
          path: '/noticeDetail',
          query: {
            id
          }
        })
      },
    },
    components: {
      swiper,
      swiperSlide,
      [Rate.name]: Rate,
    }
  }
</script>
<style scoped>
.noticeSwiper{
  padding-bottom: 2rem;
  width: 100%;
  height: auto;
}
.swiper-container{
  padding-left:.35rem;
  width: 100%;
  height: 5rem;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 3.5rem;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  /* border:.02rem solid #fff; */
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .3rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #000;
  height: 1rem;
  font-weight: bold;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  font-size: .24rem;
  border-radius: 0 0 .2rem .2rem;
  height: 1.3rem;
  background: #f7f6fb;
}
.noticeSwiper-list{
  position: relative;
  margin-left: .15rem;
  font-weight: bold;
}
.noticeSwiper-tittle{
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: auto;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.noticeSwiper-time{
  display: block;
  margin-top: .1rem;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
  position: absolute;
  top: 0.8rem;
  right: 0rem;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>